<script>
import HeaderYun from "@/components/headerYun.vue";
import {changeAvatar, viewPersonalInformation} from "@/axios/http";

export default {
  name: "personalCenter",
  components: {HeaderYun},
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    getUserInfo() {
      viewPersonalInformation().then(res => {
        console.log(res)
        if (res.code === 0) {
          this.userInfo = res.data
        }
      })
    },
    //   更换图片
    changePic(e) {
      // console.log(e.target.files[0])
      changeAvatar(e.target.files[0]).then(res => {
        console.log(res, '更换图片')
        if (res.code === 0) {
          this.userInfo = res.userInfo
        }
      })
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
        this.userInfo=info.file.response.userInfo
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<template>
  <div>
    个人中心
    <header-yun></header-yun>
    <img :src="userInfo.avatarUrl" alt="">
    <button @click="changePic">改变图片</button>
    <input type="file" @input="changePic">
    <a-upload
        :showUploadList="false"
        action="/api/pcUser/updata/userAvatar"
        @change="handleChange"
    >
      <a-button>
        <a-icon type="upload"/>
        上传头像
      </a-button>
    </a-upload>
  </div>
</template>

<style scoped lang="less">
img {
  width: 300px;
}
</style>